<template>
  <div class="container">
    <el-carousel :interval="3000" type="card" height="80vh" indicator-position="outside">
      <el-carousel-item v-for="item in items" :key="item">
        <img class="carousel-image" :src="item" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/1.jpg',
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/2.jpg',
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/3.jpg',
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/4.jpg',
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/5.jpg',
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/6.jpg',
  'https://animaladoption.oss-cn-beijing.aliyuncs.com/%E5%89%8D%E7%AB%AF%E8%A3%85%E9%A5%B0%E5%9B%BE%E7%89%87/%E8%BD%AE%E6%92%AD%E5%9B%BE/7.jpg'
]);
</script>

<style scoped>
.container {
  width: 100%;
  height: 80vh; /* 减少高度，以适配轮播图 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-carousel {
  width: 100%;
  top:40px;
}

/* .el-carousel__item {
  height: 100%;
  width: 80%;
} */

.carousel-image {
  width: auto;
  height: 100%;
  object-fit: cover;
}
</style>
